<template>
	<view class="container">
		<view class="header">
			<image class="background" src="../static/img/login_bg.jpg"></image>
			<view class="title">易·校园行校园综合平台</view>
			
			<view class="slogan">丰富校园生活</view>
		</view>
		<view class="content">
			<text class="description">为了让大学生活更加精彩，于是易·校园行校园综合平台便诞生了！感谢您的使用，如遇到问题请即使反馈或联系客服，我们会在第一时间帮您解决!</text>
		</view>
		<view class="contact">联系我们</view>
		<view class="contact-info">
			<view class="info-item">
				官方邮箱
				<view class="info-detail">xxxxxxxxxx@qq.com</view>
			</view>
			<view class="info-item">
				其他反馈
				<view class="info-detail">xxxxxxxxxx@qq.com</view>
			</view>
			<view class="info-item">
				总部办公地址
				<view class="info-detail">西安交通大学</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.header {
		position: relative;
		width: 100%;
		height: 400rpx;
		text-align: center;
		color: #fff;
		font-size: 45rpx;
		font-weight: bold;
	}

	.background {
	  position: absolute;
	  top: 70rpx;
	  left: 50%;
	  transform: translateX(-50%);
	  width: 80%;
	  height: 80%;
	  z-index: -1;
	  object-fit: cover;
	  border-radius: 25px;
	}



	.title {
	  margin-top: 120rpx;
	  background: linear-gradient(to right, #8A2BE2, #00FFFF);
	  /* 从紫色到青绿色 */
	  -webkit-background-clip: text;
	  /* 将渐变色应用到文字上 */
	  -webkit-text-fill-color: transparent;
	  /* 文字填充为透明，使渐变色显示 */
	}


	

	.slogan {
	  color: #000;
	  margin-top: 10px;
	  font-size: 25rpx;
	  background: linear-gradient(to right, #8A2BE2, #00FF00);
	  /* 从紫色到更加绿色的渐变色 */
	  -webkit-background-clip: text;
	  /* 将渐变色应用到文字上 */
	  -webkit-text-fill-color: transparent;
	  /* 文字填充为透明，使渐变色显示 */
	}


	.content {
		width: 90%;
		margin-top: 40rpx;
		text-align: center;
	}

	.description {
		display: block;
		font-weight: bold;
		line-height: 55rpx;
	}

	.contact {
		margin-top: 130rpx;
		font-weight: bold;
		font-size: 50rpx;
	}

	.contact-info {
		margin-top: 30rpx;
	}

	.info-item {
		display: flex;
		margin-top: 30rpx;
		font-weight: bold;
		color: #777E87;
		font-size: 30rpx;
	}

	.info-detail {
		margin-left: 20rpx;
		color: #000;
	}
</style>